/* 建议是用 flex:1 和flex:none 来区分要不要自动分配给项目*/
/*--------------------------分配富裕空间1是等分,none是不分给它--------------------------*/
.flex—1 {
	flex: 1;
}
/* 父定义flex子元素长度没用 */
.flex—auto{
	flex: 0 0 auto;
}

.fiex-0 {
	flex: none;
}
/*--------------------------容器布局--------------------------*/
.flex-block {
	/* 父元素宽度100% */
	display: flex;
}

.flex-inline {
	/* 父元素更具元素展现宽度 */
	display: inline-flex;
}

/*水平从左到右 不换行*/
.flex-lrb {
	display: flex;
	flex-flow: row nowrap;
}

/*水平从左到右 换行*/
.flex-lrh {
	display: flex;
	flex-flow: row wrap;
}

/*水平从右到左*/
.flex-rl {
	display: flex;
	flex-direction: row-reverse;
}

/*垂直上到下*/
.flex-cz {
	display: flex;
	flex-direction: column;
}

/*--------------------------项目对齐方式--------------------------*/
/*左对齐*/
.flex-xm-l {
	justify-content: flex-start;
}

/*右对齐*/
.flex-xm-r {
	justify-content: flex-end;
}

/*居中*/
.flex-xm-c {
	justify-content: center;
}

/*两端对齐，项目之间的间隔都相等。*/
.flex-xm-lr {
	justify-content: space-between;
}

/* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
.flex-xm-lrb {
	justify-content: space-around;
}

/*--------------------------项目交叉轴(内容)对齐方式--------------------------*/
/* 交叉轴的起点对齐 内容上对齐 */
.flex-nr-t {
	align-items: flex-start;
}

/* 交叉轴的终点对齐。内容下对齐 */
.flex-nr-b {
	align-items: flex-end;
}

/* 交叉轴的中点对齐。内容居中对齐 */
.flex-nr-c {
	align-items: center;
}

/* 项目的第一行文字的基线对齐。内容第一行文字基线对齐 */
.flex-nr-wzt {
	align-items: baseline;
}

/* 默认：如果项目未设置高度或设为auto，将占满整个容器的高度。*/
.flex-nr-mr {
	align-items: stretch;
}

/*--------------------------允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性--------------------------*/
/* 	align-self: auto; 默认:表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
	align-self: stretch; 如果项目未设置高度或设为auto，将占满整个容器的高度 */
	/* 交叉轴的起点对齐 内容上对齐 */
.flex-gnr-t {
	align-self: flex-start;
}

/* 交叉轴的终点对齐。内容下对齐 */
.flex-gnr-b {
	align-self: flex-end;
}

/* 交叉轴的中点对齐。内容居中对齐 */
.flex-gnr-c {
	align-self: center;
}

/* 项目的第一行文字的基线对齐。内容第一行文字基线对齐 */
.flex-gnr-wzt {
	align-self: baseline;
}

/*如果项目未设置高度或设为auto，将占满整个容器的高度。*/
.flex-gnr-mr {
	align-self: stretch;
}

/*--------------------------项目多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用(主div有设置高度时候项目)对齐方式--------------------------*/
/* 主div有设置高度可以是使用 */
/*与交叉轴的起点对齐 顶部对齐*/
.flex-zxm-t {
	align-content: flex-start;
}

/*与交叉轴的终点对齐 底部对齐*/
.flex-zxm-b {
	align-content: flex-end;
}

/*与交叉轴的中点对齐。 居中对齐*/
.flex-zxm-c {
	align-content: center;
}

/*与交叉轴两端对齐，轴线之间的间隔平均分布。 上下平分*/
.flex-zxm-tb {
	align-content: space-between;
}

/*每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 */
.flex-zxm-tbb {
	align-content: space-around;
}

/* 默认：轴线占满整个交叉轴 */
.flex-zxm-tbbx {
	align-content: stretch;
}

